<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>Taxonomy</title>
    <link rel="icon" href="../favicon.ico"/>

    <!-- Add Popoto default CSS styles -->
    <link rel="stylesheet" href="../node_modules/popoto/dist/popoto.min.css">
    <link rel="stylesheet" href="../shared.css">

    <style>
        .ppt-div-graph {
            height: 100%;
        }

        .ppt-container-graph {
            height: 865px;
        }
    </style>
</head>
<body class="ppt-body">

<section class="ppt-section-main">
    <div class="ppt-section-header">
        <span class="ppt-header-span">Taxonomy example</span>
    </div>
    <div class="ppt-container-graph">

        <div id="popoto-taxonomy" class="ppt-taxo-nav">

        </div>

        <div id="popoto-graph" class="ppt-div-graph">
            <!-- Graph is generated here -->
        </div>
    </div>

</section>

<!-- Required scripts -->
<script src="../shared.js" charset="utf-8"></script>
<script src="../node_modules/d3/dist/d3.min.js" charset="utf-8"></script>
<script src="../node_modules/neo4j-driver-lite/lib/browser/neo4j-lite-web.min.js" charset="utf-8"></script>
<script src="../node_modules/popoto/dist/popoto.min.js" charset="utf-8"></script>
<script>

    var driver = neo4j.driver(
        "neo4j+s://dff437fa.databases.neo4j.io",
        neo4j.auth.basic("popoto", "popotopassword"),
    );

    popoto.runner.DRIVER = driver

    // Define the list of label provider to customize the graph behavior:
    // Only two labels are used in Neo4j movie graph example: "Movie" and "Person"
    popoto.provider.node.Provider = {
        "Social": {
            children: ["Bar", "Food and Dining"],
            returnAttributes: ["name", "id", "address", "postcode", "po_box", "locality", "address_extended", "tel", "fax", "website", "email", "latitude", "longitude"],
            constraintAttribute: "id",
            "displayResults": function (resultElement) {

                resultElement
                    .append("span")
                    .attr("class", "result-title")
                    .text(function (d) {
                        return d.attributes.name;
                    })
                    .on("click", function (r) {
                        flyToResult(r)
                    });

            }
        },
        "Landmark": {
            returnAttributes: ["name", "id", "address", "postcode", "po_box", "locality", "address_extended", "tel", "fax", "website", "email", "latitude", "longitude"],
            constraintAttribute: "id"
        },
        "Bar": {
            parent: "Social",
            children: ["Sport", "Hotel Lounge", "Wine"],

        },
        "Food and Dining": {
            parent: "Social",
            children: ["Bagel and Donut", "Bakery", "Cafe, Coffee and Tea House", "Dessert", "Ice Cream Parlor", "Juice Bar and Smoothie", "Restaurant"],

        },
        "Restaurant": {
            parent: "Food and Dining",
            children: ["American", "Barbecue", "Burger", "Chinese", "Deli", "Diner", "Fast Food", "French", "Indian", "Italian", "Japanese", "Korean", "Mexican", "Middle Eastern", "Pizza", "Seafood", "Steakhouse", "Sushi", "Thai", "Vegan and Vegetarian", "Asian", "Food Truck"],

        },
        "Neighborhood": {
            returnAttributes: ["name", "id"],
            constraintAttribute: "id"
        },
        "Locality": {
            returnAttributes: ["name"],
            constraintAttribute: "name"
        },
        "Region": {
            returnAttributes: ["code"],
            constraintAttribute: "code"
        },
        "PriceCategory": {
            returnAttributes: ["value"],
            constraintAttribute: "value"
        },
        "Rating": {
            returnAttributes: ["value"],
            constraintAttribute: "value"
        },
        "Year": {
            returnAttributes: ["value"],
            constraintAttribute: "value"
        },
        "Country": {
            returnAttributes: ["code"],
            constraintAttribute: "code"
        },
        "Owner": {
            returnAttributes: ["name"],
            constraintAttribute: "name"
        }
    };

    driver.verifyConnectivity().then(function () {
        // Start the generation using parameter as root label of the query.
        popoto.start("Social");
    }).catch(function (error) {
        document.getElementById("modal").style.display = "block";
        document.getElementById("error-content").innerText = error;
        console.error(error)
    })

</script>
</body>
</html>
